<template>
  <div>
    <!-- 查询月份报表 -->
    <div class="container">
      <div class="block">
        <span class="demonstration"
          >选择要查询的月份<el-date-picker
            v-model="month"
            type="month"
            placeholder="选择月"
          >
          </el-date-picker
        ></span>
        <el-button type="primary" icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="submit"
          >查询</el-button
        >
      </div>
    </div>
    <!-- 报表的扇形图 -->
    <div>
      <div
        id="creatorChart"
        style="width: 50%; height: 300px; float: left"
      ></div>
      <div id="stateChart" style="width: 50%; height: 300px; float: left"></div>
      <span class="demonstration">
        选择年度报表的年份
        <el-date-picker v-model="year" type="year" placeholder="选择年">
        </el-date-picker>
        (选择完后点击员工进行查询) </span
      ><br />
      <span class="demonstration">
        输入要计算的每月的订单数量
        <el-input
          type="number"
          placeholder="请输入每月的单量"
          v-model="sum"
          clearable
          style="width: 200px"
        >
        </el-input>
        (选择完后点击员工进行查询)
      </span>
      <div id="userChart" style="width: 100%; height: 300px; float: left"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      month: "",
      creator: [],
      state: [],
      year: "",
      statCreator: [],
      sum: "",
    };
  },

  mounted() {
    this.statList();
  },

  methods: {
    //日期格式转换
    currentDate(month) {
      return (
        new Date(month).getFullYear() +
        "-" +
        ("0" + (new Date(month).getMonth() + 1)).slice(-2)
      );
    },
    //重置查询
    reset() {
      this.month = "";
      this.statList();
    },

    //提交查询月份
    submit() {
      this.month = this.currentDate(this.month);
      this.statList();
    },

    //获取数据
    statList() {
      if (this.month != "" && this.month != "NaN-aN") {
      } else {
        this.month = "";
      }

      this.$axios.get("/order/stat?month=" + this.month).then((resp) => {
        if (resp.data.code == 200) {
          if (resp.data.data.creatorStat.length == 0) {
            this.creator = [{ name: "无数据", value: "0" }];
          } else {
            this.creator = resp.data.data.creatorStat;
          }
          if (resp.data.data.stateStat.length == 0) {
            this.state = [{ name: "无数据", value: "0" }];
          } else {
            this.state = resp.data.data.stateStat;
          }
          this.drawLine();
        }
      });
    },

    //显示报表
    showStat(param) {
      let userChart = this.$echarts.init(document.getElementById("userChart"));
      console.log(this.statCreator);

      userChart.setOption({
        title: {
          // 报表标题
          text: param.name + param.year + "年的年度报表",
          // 报表标题位置
          left: "center",
          // 报表副标题
          subtext: "以下数据以每月" + this.sum + "单计算",
        },
        tooltip: {
          //trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b}月 : {c}单",
        },
        toolbox: {
          show: true,
          feature: {
            //mark: { show: true },
            //dataView: { show: true, readOnly: false },//数据源
            magicType: { show: true, type: ["line", "bar"] }, //切换视图
            restore: { show: true }, //还原
            saveAsImage: { show: true }, //下载图片
          },
        },
        legend: {
          selectedMode: false,
        },
        grid: {
          left: 100,
          right: 100,
          top: 50,
          bottom: 50,
        },
        xAxis: [
          {
            type: "category",//category
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            type: "bar",
            label: {
              show: true,
              formatter: (params) =>
                (Math.round(params.value * 100) / this.sum).toFixed(2) + "%",
            },
            data: this.statCreator,
          },
        ],
      });
    },

    //员工年度报表
    orderLine(param) {
      if (this.sum != "" && this.sum != null) {
      } else {
        this.sum = "10";
      }
      console.log(this.sum);
      let years = "";
      if (this.year != "" && this.year != null) {
        years = new Date(this.year).getFullYear();
      } else {
        years = "2024";
        this.year = years;
      }
      param.year = years;

      this.$axios
        .get("/order/statYear", {
          params: {
            year: years,
            creator: param.name,
          },
        })
        .then((resp) => {
          if (resp.data.code == 200) {
            console.log(resp.data.data);
            this.statCreator = resp.data.data;
            console.log(this.statCreator);
            this.showStat(param);
          }
        });
    },

    //显示扇形统计图
    drawLine() {
      //设置显示月份
      let month = "";

      if (this.month != "" && this.month != "NaN-aN") {
        month =
          new Date(this.month).getFullYear() +
          "年" +
          ("0" + (new Date(this.month).getMonth() + 1)).slice(-2) +
          "月";
      } else {
        month = "全部数据";
      }
      // 基于准备好的dom，初始化echarts实例
      //员工销售统计图
      let creatorChart = this.$echarts.init(
        document.getElementById("creatorChart")
        // ,"dark"
      ); // 绘制图表
      creatorChart.setOption({
        //标题
        title: {
          text: "员工销售统计",
          left: "center",
          top: "center",
          subtext: month,
        },
        tooltip: { trigger: "item", formatter: "{b} : {c}单({d})%" },
        //图例
        legend: {
          //orient: "vertical",
          left: "center",
        },
        //图形
        series: [
          {
            //pie：扇形，bar：条状
            type: "pie",
            //stillShowZeroSum: false,
            label: {
              show: true,
              formatter: "{b} : {c}单", //{d}%
            },
            //数据
            data: this.creator,
            radius: ["40%", "70%"],
          },
        ],
      });
      //单击事件
      creatorChart.on("click", this.orderLine);

      //销售状态统计图
      let stateChart = this.$echarts.init(
        document.getElementById("stateChart")
      );
      stateChart.setOption({
        title: {
          text: "销售状态统计",
          left: "center",
          top: "center",
          subtext: month,
        },
        tooltip: { trigger: "item", formatter: "{b} : {c}单({d})%" },
        legend: {
          //orient: "vertical",
          left: "center",
        },
        series: [
          {
            label: {
              show: true,
              formatter: "{b} : {c}单",
            },
            type: "pie", //pie：扇形，bar：条状
            data: this.state,
            radius: ["40%", "70%"],
          },
        ],
      });
      //单击事件
      stateChart.on("click", function (params) {
        console.log(params);
      });
    },
  },
};
</script>

<style>
</style>
